<template>
	<div class="tpl-manage">
		<curr-app :left="245"></curr-app>
		<list-title :data="header"></list-title>
		<div class="tpl">
			<el-button type="primary" style='width: 300px; height: 39px; font-size: 14px; position: absolute;' :disabled='gitLoading' @click='pull()'>
				同步仓库模版 <span class="el-icon-loading" v-if='gitLoading'></span>
			</el-button>
			<div class="tpl-list">
				<el-tree
				:data="tplList"
				lazy
				node-key="id"
				:default-expand-all="false"
				:expand-on-click-node="true"
				:load="getChildNode"
				v-loading="loading"
				element-loading-text="拼命加载中"
				element-loading-spinner="el-icon-loading"
				element-loading-background="rgba(255, 255, 255, 0.92)"
				ref="tree"
				@node-click="handleNodeClick"
				style="background: none">
					<span class="custom-tree-node" slot-scope="{ node, data }">
						<i :class="[data.icon, 'tree-icon']"></i>
						<span>{{ node.label.name }}</span>
					</span>
				</el-tree>
			</div>
			<div class="content">
				<router-view></router-view>
			</div>
		</div>
	</div>
</template>

<script>
import ListTitle from "pc/common/Title"
import {judgeAuth} from "static/js/common.js"
import {mapGetters} from 'vuex'
import CurrApp from "pc/common/CurrApp"

export default {
	inject: ['reload'],
	data() {
		return {
			/*appid*/
			appid: this.$route.query.appid,
			/*头部数据*/
			header: {
				title: '模版管理',
				buttons: [
					{
						title: '模版列表',
						type: 'primary',
						pathName: 'pc/cms/instance/template/TplList',
						auth: true,
						query: {
							appid: this.$route.query.appid,
						},
					}
				]
			},
			gitLoading: false,
			loading: true,
			tplList: [
				// {
				// 	id: 1,
				// 	label: {
				// 		name: '一级 1',
				// 		content_count: 0
				// 	},
				// }, 
				// {
				// 	id: 2,
				// 	label: {
				// 		name: '一级 2',
				// 		content_count: 100
				// 	},
				// 	children: [
				// 		{
				// 			id: 3,
				// 			label: {
				// 				name: '二级 2-1',
				// 				content_count: 0
				// 			}
				// 		},
				// 		{
				// 			id: 4,
				// 			label: {
				// 				name: '二级 2-2',
				// 				content_count: 0
				// 			}
				// 		}
				// 	]
				// }, 
				// {
				// 	id: 5,
				// 	label: {
				// 		name: '一级 3',
				// 		content_count: 0
				// 	},
				// 	children: [
				// 		{
				// 			id: 6,
				// 			label: {
				// 				name: '二级 3-1',
				// 				content_count: 0
				// 			}
				// 		},
				// 		{
				// 			id: 7,
				// 			label: {
				// 				name: '二级 3-2',
				// 				content_count: 0
				// 			}
				// 		}
				// 	]
				// },
			],
			defaultProps: {
				children: 'children',
				label: 'label'
			},
		};
	},
	components: {
		ListTitle,
		CurrApp
	},
	created: function() {
		/*权限判断显示*/
		// this.header.buttons[0].auth = (judgeAuth('tplinfoList', this.allMenuList) == undefined)?false:true
		/*获取分类数据*/
		this.getTplList()
	},
	methods: {
		/*克隆 拉取仓库模版*/
		pull(){
			if(this.$api.gitClone != undefined){
				this.$baseURL(this.$domain.cms)
				this.gitLoading = true
				this.$get(this.$api.gitClone, {
					'appid': this.appid,
					'tplid': this.$route.query.id,
				}).then(res => {
					if(res.data.code === 0){
						this.getTplList()
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'success'
						});
						this.gitLoading = false
					}else{
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'error'
						});
					}
				})
				.catch(err => {})
				.finally(() => {
					this.gitLoading = false
				})
			}else{
				this.$message({
					showClose: true,
					message: '没有分类列表的权限',
					type: 'error'
				});
			}
		},
		/*获取模版列表*/
		getTplList: function(path = '', fn = ''){
			if(this.$api.cmsTplList != undefined){
				this.$baseURL(this.$domain.cms)
				this.$get(this.$api.cmsTplList, {
					'appid': this.appid,
					'id': this.$route.query.id,
					'path': path,
				}).then(res => {
					if(res.data.code === 0){
						if(res.data.data != undefined && fn == ''){
							this.tplList = []
							let icon = ''
							Object.keys(res.data.data).forEach((k) => {
								if(res.data.data[k].flag == 1){//文件夹
									icon = 'el-icon-folder'
								}else{//非文件夹
									icon = 'el-icon-document'
								}
								if(res.data.data[k].fileName.substr(0, 1) != '.'){
									this.tplList.push ({
										id: k,
										icon: icon,
										flag: res.data.data[k].flag,
										label: {
											name: res.data.data[k].fileName,
											path: res.data.data[k].dir,
										}
									})
								}
							})
						}
						if(fn != ''){
							let icon = ''
							let tmp = []
							if(res.data.data == undefined){
								fn([])
							}else{
								Object.keys(res.data.data).forEach((k) => {
									if(res.data.data[k].flag == 1){//文件夹
										icon = 'el-icon-folder'
									}else{//非文件夹
										icon = 'el-icon-document'
									}
									if(res.data.data[k].fileName.substr(0, 1) != '.'){
										tmp.push ({
											id: k,
											icon: icon,
											flag: res.data.data[k].flag,
											label: {
												name: res.data.data[k].fileName,
												path: res.data.data[k].dir,
											}
										})
									}
								})
								fn(tmp)
							}
						}
						this.loading = false
					}
				})
				.catch(err => {})
				.finally(() => {
					this.loading = false
				})
			}else{
				this.$message({
					showClose: true,
					message: '没有分类列表的权限',
					type: 'error'
				});
			}
		},
		/*加载子节点内容*/
		getChildNode(node, resolve){
			if(node.data.id){
				if(node.data.flag == 1){//文件夹
					let child = this.getTplList(node.data.label.path, resolve)

				}
				if(node.data.flag == 0){
					resolve([])
				}
			}
		},
		/*点击节点*/
		handleNodeClick: function(node, resolve){
			// console.log(node)
			if(node.flag == 1){//文件夹
				// console.log('文件夹')
			}
			if(node.flag == 0){
				// console.log('文件')
				// console.log(node.label.path + '/' + node.label.name)
				let query = {
					/*注释原因：此appid是在localstorge中去的，当开两个页面，另一个页面点到别的地方的时候，就取不到了*/
					// 'appid': JSON.parse(this.$localstorage.get('navbarBack')).appID,
					'appid': this.$route.query.appid,
					'id': this.$route.query.id,
					'file': node.label.path + '/' + node.label.name,
				}
				if(this.$api.contentList != undefined){
					this.$router.push({
						name: 'pc/cms/instance/template/TplView',
						query: query
					})
				}else{
					this.$message({
						showClose: true,
						message: '没有模版预览的权限',
						type: 'error'
					});
				}
			}
		},
	},
	computed: {
		...mapGetters([
			'allMenuList'
		])
	}
};
</script>

<style lang="stylus" scoped>
@import '~static/css/variable.styl'
.tpl-manage
	height: 100%
	.tpl
		height: calc(100% - 45px)
		margin-top: 10px
		display: flex
		.loading
			width: 100%
			height: 100%
			padding-top: 30px
			text-align: center
			.el-icon-loading
				margin-right: 5px
		.title
			width: 100%
			height: 70px
			overflow: hidden
			font-weight: bold
			line-height: 70px
			padding: 0 20px
			box-sizing: border-box
			background-color: #d5dae1
			.iconfont
				font-size: 20px
				margin: 0 auto
				display: block
				width: 20px
				height: 20px
			.iconfont:hover
				color: $color-default
				cursor: pointer
		.tpl-list
			width: 300px
			height: calc(100% - 39px)
			margin-top: 39px
			border: #e8ebef 2px solid
			overflow: auto
			padding-bottom: 32px
			.el-tree
				// background: #e8ebef
				font-size: 12px !important
				/deep/ .el-tree-node__content
					height: 30px
				/deep/ .el-icon-caret-right:before
					color: #2e2e2e
				/deep/ .is-leaf:before
					color: transparent !important
				/deep/ .el-tree-node.is-current>.el-tree-node__content
					background-color: #e8ebef !important
				/deep/ .custom-tree-node>span
					margin-right: 10px
				.tag_small
					line-height: 14px !important
				/deep/ .ivu-tag-error
					background: $color-default
		.content
			flex: 1
			overflow: auto
			// border: #e8ebef solid 2px
			border-left: 0
			height: 100%
			padding: 0 10px
</style>